<template>
  <el-container v-loading="loading" class="post-article">
    <el-header class="header">
      <el-select v-model="article.cid" prop="Type" ref="selectLabel" @change="getLabel" placeholder="请选择模型" style="width: 150px;">
        <el-option
                v-for="item in selectModel"
                :key="item.modelId"
                :label="item.modelName"
                :value="item.modelId">
        </el-option>
      </el-select>
      <div class="formItem">
        <input v-show="false" ref="fileRef" type="file" @change="uploadFileWithClear($event)">
        <el-upload class="upload_btn"
                   action="uploadUrl"
                   :http-request="onUpload"
                   :show-file-list="false"
        >
          <el-button slot="trigger" size="big" type="primary" >待预测数据文件</el-button>
        </el-upload>
        <el-button
                type="primary"
                size="big"
                @click="predict()">预测
        </el-button>
      </div>
    </el-header>
    <el-main class="main">
      <div id="main" style="width: 600px; height: 400px" ref="chart1"></div>
    </el-main>
  </el-container>
</template>
<script>
  import {postRequest, postRequestBody} from '../utils/api'
  import {putRequest} from '../utils/api'
  import {deleteRequest} from '../utils/api'
  import {getRequest} from '../utils/api'
  import {uploadFileRequest} from '../utils/api'
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  import {isNotNullORBlank} from '../utils/utils'
  import * as echarts from 'echarts';
  import {postRequestModelName, postUpload, postUploadPredict} from "../tool/pushFile";
  export default  {
      activated: function () {
          this.selectModel=[]
      var _this = this;
        getRequest("/system/model/list" ).then(resp=> {
          if (resp.status == 200) {
            JSON.stringify(resp);
            console.log(resp.data.rows);
                for (let i = 0; i < resp.data.rows.length; i++) {  //电压值
                    this.selectModel.push(resp.data.rows[i]);
                }
            console.log(this.selectModel);
          } else {
            _this.$message({type: 'error', message: '页面加载失败!'})
          }
        }, resp=> {
          _this.loading = false;
          _this.$message({type: 'error', message: '页面加载失败!'})
        })
    },
    components: {
      mavonEditor
    },
    methods: {
      getLabel() {
        this.$nextTick(() => {
          this.model=this.$refs.selectLabel.selected.label;
        })
      },
      onUpload(multipartFile) {
        let formData = new FormData()
        formData.append('multipartFile', multipartFile.file)
        postUploadPredict(formData).then((res) => {
          this.$message.success("上传成功")
        }).catch((e) => {
          this.$message.error(e.message)
        })
      },
      predict() {
          this.data1=[],
              this.data2=[]
        var _this = this;
        postRequestModelName("/system/prediction/predict", this.model).then(resp => {
          if (resp.status == 200) {
              console.log(resp.data[1]);
            _this.$alert('预测成功!', '成功!');
              this.m1=resp.data[0]
              console.log(this.m1);
              for (let i = 0; i < resp.data[1].length; i++) {
                  this.data1.push(resp.data[1][i][0]);
              }
              for (let i = 0; i < resp.data[1].length; i++) {
                  this.data2.push(resp.data[1][i][1]);
              }
              console.log(this.data1);
              console.log(this.data2);
              this.initCharts1();
          }
        })
      },
      initCharts1 () {// 折线图方法
        let myChart = this.$echarts.init(this.$refs.chart1);
        console.log(this.$refs.chart1)
        myChart.setOption({
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [this.m1+'浓度值mol/L'],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.data1,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: this.m1+'浓度值mol/L',
              type: "line",
              stack: "总量",
              data: this.data2,
            },
          ],
        });
        a=this.charts
        localStorage.setItem('doctorDetails', JSON.stringify(a));
      },
    },
    data() {
      return {
          data1:[],
          data2:[],
        selectModel: [],
        tagInputVisible: false,
        tagValue: '',
        loading: false,
        from: '',
        article: {
          id: '-1',
          dynamicTags: [],
          title: '',
          mdContent: '',
          cid: ''
        },
        charts: "",
        opinionData: ["3", "2", "4", "4", "5","4"],//折线图数据
        data : [
          { time: "01-08", value: 24 },
          { time: "01-09", value: 23 },
          { time: "01-10", value: 32 },
          { time: "01-11", value: 43 },
          { time: "01-12", value: 12 },
          { time: "01-13", value: 53 },
        ],
        uploadUrl: '/system/prediction/file',
        model:'',
          modelLength:null,
      };
    },
  }
</script>
<style>
  .upload_btn {
    display: inline-block;
    margin-right:10px;
  }
  .post-article > .main > #editor {
    width: 100%;
    height: 450px;
    text-align: left;
  }
  .post-article > .header {
    background-color: #ececec;
    margin-top: 10px;
    padding-left: 5px;
    display: flex;
    justify-content: flex-start;
  }
  .post-article > .main {
    /*justify-content: flex-start;*/
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    background-color: #ececec;
    padding-top: 0px;
  }
  .post-article > .header > .el-tag + .el-tag {
    margin-left: 10px;
  }
  .post-article > .header > .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .post-article > .header > .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .post-article {
  }
</style>
